<template>
  <div class="select-block bg-white">
    <div class="select-item w-100 d-flex ai-center jc-between" v-for="(item,i) in options" :key="item.tag_name"
         @tap="$emit('handleSelectDesc',i)">
      <div :class="[{'selected-bg':item.select},'select-button','flex-c']">
        <img v-if="item.select" src='/static/icon/selected.png' class="selected"></img>
      </div>
      <div class="item-desc">{{item.tag_name}}</div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    options: Array
  },
  data() {
    return {};
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
@import "@/styles/index.scss";
.select-block {
  width: 100vw;
  .select-item {
    position: relative;
    min-height: 103rpx;
    .select-button {
      position: relative;
      @include wh(46rpx, 46rpx);
      margin-left: 40rpx;
      border: 1rpx solid #abdcb4;
      background: #eef3f8;
      border-radius: 50%;
      .selected {
        @include wh(26rpx, 26rpx);
      }
    }
    .selected-bg {
      background: $green;
    }
    .item-desc {
      width: 636rpx;
      line-height: 1.4;
    }
    &::after {
      content: "";
      display: block;
      position: absolute;
      bottom: 0;
      right: 0;
      @include wh(636rpx, 1px);
      background: #d7eddb;
    }
    &:last-child {
      &::after {
        display: none;
      }
    }
  }
}
</style>